<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <title>Happy Birthday</title>
  <link rel="stylesheet" href="../css/jquery.fullPage.css">
  <link rel="stylesheet" href="../css/style.css">
</head>

<body>
  <div class="bgcolor">
    <div style="z-index:100;" id="dowebok">
      <!--第一屏-->
      <div class="section">
        <div class="ly-box01">
          <div class="ly-txt01">
            <p class="ly-stxt01">哈哈哈哈哈哈哈哈哈</p>
            <p class="ly-stxt02">惊不惊喜小寿星</p>
            <p class="ly-stxt03">在这个特别的日子里</p>
            <p class="ly-stxt04">愿我们的生活比昨天更甜</p>
            <p class="ly-stxt05">你的笑容比阳光更灿烂</p>
          </div>
          <div class="ly-txt02">
            <p class="ly-stxt06">一月</p>
            <p class="ly-stxt07">去颐和园滑冰</p>
            <!-- <img class="ly-stxt08" src="../img/11.jpg" style="width:100%;height:100%"> -->
            <img class="ly-stxt09" src="../img/12.jpg" style="width:100%;height:100%">
          </div>
        </div>
      </div>

      <!--第二屏-->
      <div class="section">
        <div class="timeline"></div>
        <div class="timepoint11"></div>
        <div class="ly-box11">
          <div class="ly-txt11" style="width:100%;height:10%;left:10%">
            <img class="ly-img11" src="../img/HappyBirthday.png" style="width:100%;height:100%">
          </div>
          <div class="ly-txt12">
            二月，一起回家过大年!
          </div>
          <div class="ly-imgbox11" style="height:80%">
            <img class="ly-img11" src="../img/11.jpg" style="max-width:100%;height:auto;">
            <!-- <div style="background: url(../img/11.jpg) no-repeat; background-size: cover; width: 100%; height: 100%;"></div> -->
          </div>
        </div>
        <div class="ly-triangle11"></div>

        <div class="ly-box12">
          <div class="ly-txt13" style="width:100%;height:10%;left:10%">
            <img class="ly-img11" src="../img/HappyBirthday.png" style="width:100%;height:100%">
          </div>
          <div class="ly-txt14">
            <p>三月，北海公园春游！Cool Cool~</p>
            <!-- <p>所有的梦想都能实现</p>
            <p>所有的期待都能出现</p>
            <p>所有的付出都能兑现在你生日来临之即。</p> -->
          </div>
          <div class="ly-imgbox11" style="height:80%">
            <!-- <img class="ly-img11" src="../img/31.jpg" style="height:100%"> -->
            <div style="background: url(../img/31.jpg) no-repeat; background-size: cover; width: 100%; height: 100%;"></div>
          </div>
        </div>
        <div class="ly-triangle12"></div>
      </div>
      <!--第二屏 副本1-->
      <div class="section">
        <div class="timeline"></div>
        <div class="timepoint11"></div>
        <div class="ly-box11" style="width: 30%;">
          <div class="ly-txt11" style="width:100%;height:10%;left:10%">
            <img class="ly-img11" src="../img/HappyBirthday.png" style="width:100%;height:100%">
          </div>
          <div class="ly-txt12">
            四月，连着五一，一起回家组织家长见了面，从此刻开始步入第二阶段~
            <p>恋爱 → 见家长</p>
            <p>当时第一次真正的开车去市区,带着你和你的家人，心惊胆战的，好在一路顺利~</p>
          </div>
          <div class="ly-imgbox11" style="height:80%">
            <img class="ly-img11" src="../img/41.jpg" style="max-width:100%;height:auto;">
            <!-- <div style="background: url(../img/11.jpg) no-repeat; background-size: cover; width: 100%; height: 100%;"></div> -->
          </div>
        </div>
        <div class="ly-triangle11"></div>

        <div class="ly-box12" style="width: 30%; left: 58%;">
          <div class="ly-txt13" style="width:100%;height:10%;left:10%">
            <img class="ly-img11" src="../img/HappyBirthday.png" style="width:100%;height:100%">
          </div>
          <div class="ly-txt14">
            <p>五月，谢谢宝给我过生日做的榴莲披萨~还有彩票~真是惊喜！</p>
          </div>
          <div class="ly-imgbox11" style="height:70%">
            <!-- <img class="ly-img11" src="../img/31.jpg" style="height:100%"> -->
            <div style="background: url(../img/51.jpg) no-repeat; background-size: cover; width: 100%; height: 100%;"></div>
          </div>
        </div>
        <!-- <div class="ly-triangle12"></div> -->
      </div>
      <!--第二屏 副本2-->
      <div class="section">
        <div class="timeline"></div>
        <div class="timepoint11"></div>
        <div class="ly-box11" style="width: 30%;">
          <div class="ly-txt11" style="width:100%;height:10%;left:10%">
            <img class="ly-img11" src="../img/HappyBirthday.png" style="width:100%;height:100%">
          </div>
          <div class="ly-txt12">
            六月，最好的朋友皮皮很皮一家来北京玩喽！
            <p>小可可真可爱，太喜欢了~</p>
            <p>以后也要生个闺女，长得像你多一点~毕竟你这么好看</p>
          </div>
          <div class="ly-imgbox11" style="height:80%">
            <img class="ly-img11" src="../img/61.jpg" style="max-width:100%;height:auto;">
            <!-- <div style="background: url(../img/11.jpg) no-repeat; background-size: cover; width: 100%; height: 100%;"></div> -->
          </div>
        </div>
        <div class="ly-triangle11"></div>

        <div class="ly-box12" style="width: 30%; left: 58%;">
          <div class="ly-txt13" style="width:100%;height:10%;left:10%">
            <img class="ly-img11" src="../img/HappyBirthday.png" style="width:100%;height:100%">
          </div>
          <div class="ly-txt14">
            <p>七月，一起看了一场脱口秀，之前从没有看过，笑的合不拢嘴，很有意思。以后我要带你多出去体验一些没玩过的，做一些有意义的事~</p>
          </div>
          <div class="ly-imgbox11" style="height:70%">
            <!-- <img class="ly-img11" src="../img/31.jpg" style="height:100%"> -->
            <div style="background: url(../img/71.jpg) no-repeat; background-size: cover; width: 100%; height: 100%;"></div>
          </div>
        </div>
        <!-- <div class="ly-triangle12"></div> -->
      </div>
      <!--第二屏 副本3-->
      <div class="section">
        <div class="timeline"></div>
        <div class="timepoint11"></div>
        <div class="ly-box11" style="width: 30%;">
          <div class="ly-txt11" style="width:100%;height:10%;left:10%">
            <img class="ly-img11" src="../img/HappyBirthday.png" style="width:100%;height:100%">
          </div>
          <div class="ly-txt12">
            八月，去了唐山挑选钻戒
            <p>最后定了一颗50分的，你很喜欢~</p>
            <p>和我姐一起吃了唐山的熊猫火锅</p>
            <p>免费的豆腐嘎嘎香，至今依然回味~</p>
          </div>
          <div class="ly-imgbox11" style="height:90%">
            <img class="ly-img11" src="../img/81.jpg" style="max-width:100%;height:auto;">
            <!-- <div style="background: url(../img/11.jpg) no-repeat; background-size: cover; width: 100%; height: 100%;"></div> -->
          </div>
        </div>
        <div class="ly-triangle11"></div>

        <div class="ly-box12" style="width: 30%; left: 58%;">
          <div class="ly-txt13" style="width:100%;height:10%;left:10%">
            <img class="ly-img11" src="../img/HappyBirthday.png" style="width:100%;height:100%">
          </div>
          <div class="ly-txt14">
            <p>九月，看了人生中第一场演唱会，我向你求婚你答应了~</p>
            <p>恋爱 → 见家长 → 求婚</p>
          </div>
          <div class="ly-imgbox11" style="height:70%">
            <!-- <img class="ly-img11" src="../img/31.jpg" style="height:100%"> -->
            <div style="background: url(../img/91.jpg) no-repeat; background-size: 100%; width: 100%; height: 100%;"></div>
          </div>
        </div>
        <!-- <div class="ly-triangle12"></div> -->
      </div>
      <!--第二屏 副本4-->
      <div class="section">
        <div class="timeline"></div>
        <div class="timepoint11"></div>
        <div class="ly-box11" style="width: 30%;">
          <div class="ly-txt11" style="width:100%;height:10%;left:10%">
            <img class="ly-img11" src="../img/HappyBirthday.png" style="width:100%;height:100%">
          </div>
          <div class="ly-txt12">
            十月，我们订婚了
            <p>好朋友亲戚都来了</p>
            <p>准备了订婚仪式，圆满完成！</p>
            <p>恋爱 → 见家长 → 求婚 → 订婚</p>
            <!-- <p></p> -->
          </div>
          <div class="ly-imgbox11" style="height:90%">
            <img class="ly-img11" src="../img/101.jpg" style="max-width:100%;height:auto;">
            <!-- <div style="background: url(../img/11.jpg) no-repeat; background-size: cover; width: 100%; height: 100%;"></div> -->
          </div>
        </div>
        <div class="ly-triangle11"></div>

        <div class="ly-box12" style="width: 30%; left: 58%;">
          <div class="ly-txt13" style="width:100%;height:10%;left:10%">
            <img class="ly-img11" src="../img/HappyBirthday.png" style="width:100%;height:100%">
          </div>
          <div class="ly-txt14">
            <p>十一月，已经很冷了</p>
            <p>但还是阻挡不了我们拍婚纱照，看，美美的你~</p>
          </div>
          <div class="ly-imgbox11" style="height:70%">
            <!-- <img class="ly-img11" src="../img/31.jpg" style="height:100%"> -->
            <div style="background: url(../img/111.jpg) no-repeat; background-size: cover; width: 100%; height: 100%;"></div>
          </div>
        </div>
        <!-- <div class="ly-triangle12"></div> -->
      </div>






      <!--第三屏-->

      <!-- <div class="section">
        <div class="timeline"></div>
        <div class="timepoint21"></div>
        <div class="ly-box21">
          <div class="ly-txt21" style="width:100%;height:10%;left:10%">
            <img class="ly-img11" src="../img/HappyBirthday.png" style="width:200%;height:100%">
          </div>
          <div class="ly-txt22" style="left:20%;font-size: 45px">
            <p>祝</p>
            <p>你</p>
          </div>
          <div class="ly-imgbox21">
            <img class="ly-img21" src="../img/di2.png">
          </div>
        </div>
        <div class="ly-triangle21"></div>

        <div class="ly-box22">
          <div class="ly-txt23" style="width:100%;height:10%;left:10%">
            <img class="ly-img11" src="../img/HappyBirthday.png" style="width:200%;height:100%">
          </div>
          <div class="ly-txt24">
            <p>百事可乐</p>
            <p>万事芬达</p>
            <p>天天哇哈哈</p>
            <p>月月乐百事</p>
          </div>
          <div class="ly-imgbox22">
            <img class="ly-img22" src="../img/di21.jpg">
          </div>
        </div>
        <div class="ly-triangle22"></div>

        <div class="ly-box23">
          <div class="ly-txt25" style="width:100%;height:10%;left:10%">
            <img class="ly-img11" src="../img/HappyBirthday.png" style="width:100%;height:100%">
          </div>
          <div class="ly-txt26">
            <p>年年高乐高</p>
            <p>心情似雪碧</p>
            <p>永远心飞扬</p>
          </div>
          <div class="ly-imgbox23" style="height: 70%">
            <img class="ly-img23" src="../img/di24.gif" style="height: 100%">
          </div>
        </div>
        <div class="ly-triangle23"></div>
      </div> -->

      <!--第四屏-->

      <!-- <div class="section">
        <div class="timeline"></div>
        <div class="timepoint31"></div>
        <div class="ly-box31">
          <div class="ly-txt31" style="width:100%;height:10%;left:10%">
            <img class="ly-img11" src="../img/HappyBirthday.png" style="width:100%;height:100%">
          </div>
          <div class="ly-txt32">
            <p>愿你</p>
            <p>贪吃不胖，深情不负，傻人傻福，</p>
            <p>一直幸运。一生努力，一生被爱，</p>
            <p>想要的都拥有，得不到的都释怀。🌈</p>
          </div>
          <div class="ly-imgbox31" style="height:50%">
            <img class="ly-img31" src="../img/di22.jpg" style="height:100%">
          </div>
        </div>
        <div class="ly-triangle31"></div>

        <div class="ly-box32">
          <div class="ly-txt33" style="width:100%;height:15%;left:10%">
            <img class="ly-img11" src="../img/HappyBirthday.png" style="width:100%;height:100%">
          </div>
          <div class="ly-txt34">
            <p>今晚的星星只有二十三颗，我是说，当你数到第二十三颗就把眼睛闭上，你会看到我为你点亮的蜡烛。许个愿望吧</p>
          </div>
          <div class="ly-imgbox31">
            <img class="ly-img31" src="../img/di23.jpg" style="height:100%">
          </div>
        </div>
        <div class="ly-triangle32"></div>
      </div> -->


      <div class="section">
        <div class="timeline"></div>
        <div class="timepoint11"></div>
        <div class="ly-box81">
          <div class="ly-txt11" style="width:100%;height:10%;left:10%">
            <img class="ly-img11" src="../img/HappyBirthday.png" style="width:200%;height:200%">
          </div>
          <div class="ly-txt82" style="top:8%">
            <p class="wwww1">十二月</p>
            <p class="wwww1">下雪了，你很喜欢雪，喜欢捏雪球。</p>
            <p class="wwww1">我们一起还堆了雪人，牛魔王！</p>
            <p class="wwww1">就这样，我们又一起度过了春夏秋冬~</p>
            <p class="wwww1">平淡且幸福~</p>
            <!-- <p class="wwww1">要问我什么是爱情</p>
            <p class="wwww1">一屋两人三餐四季有你，这就是爱情最好的归宿</p> -->
          </div>
          <div class="ly-imgbox81" style="height: 60%;">
            <div style="background: url(../img/121.jpg) no-repeat; background-size: cover; width: 100%; height: 100%;"></div>
          </div>
        </div>
        <div class="ly-triangle11"></div>

        <div class="ly-box82">
          <div class="ly-txt13" style="width:100%;height:10%;left:10%">
            <img class="ly-img11" src="../img/HappyBirthday.png" style="width:100%;height:100%">
          </div>
          <div class="ly-txt84">
            <p>亲爱的我的臭宝</p>
            <p>今天是你的生日!</p>
            <p>在这个时刻，说点悄悄话</p>
            <p>遇见你，是我的幸运，以后我们要一起手牵手，走更远的路。我爱你，我的爱永远只偏向你。</p>
            <p>我想写一个故事：以我开始，以我们结束，余生的路我们一起走，我陪你一直到岁月的尽头。</p>
            <p>最后，祝你快乐，不止生日~</p>
            <p><a href="./EasterEgg.html">点击有彩蛋</a>  </p>
          </div>

        </div>
        <div class="ly-triangle82"></div>
      </div>

    </div>
    <!--试验-->
    <ul class="bg-bubbles">
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
    <!-- <ul class="bg-bubbles">
      <li><img src="../img/timg.gif" style="width:100%;height:100%"></li>
      <li><img src="../img/timg.gif" style="width:100%;height:100%"></li>
      <li><img src="../img/timg.gif" style="width:100%;height:100%"></li>
      <li><img src="../img/timg.gif" style="width:100%;height:100%"></li>
      <li><img src="../img/timg.gif" style="width:100%;height:100%"></li>
      <li><img src="../img/timg.gif" style="width:100%;height:100%"></li>
      <li><img src="../img/timg.gif" style="width:100%;height:100%"></li>
      <li><img src="../img/timg.gif" style="width:100%;height:100%"></li>
      <li><img src="../img/timg.gif" style="width:100%;height:100%"></li>
      <li><img src="../img/timg.gif" style="width:100%;height:100%"></li>
    </ul> -->

  </div>
  <audio src="../music/ai.flac" autoplay="autoplay" loop="loop">
  <!-- <audio src="../music/1.mp3" autoplay="autoplay" loop="loop"> -->

    <script src="../js/jquery-1.8.3.min.js"></script>
    <script src="../js/jquery.fullPage.min.js"></script>
    <script src="../js/diy.js"></script>
</body>

</html>